<template>
  <AppWrapper content-class="flex-col">
    <section class="mb-10">
      <div class="hd flex items-center mb-3">
        <div class="tit text-[24px] font-black flex items-center">
          <span>精炼检索</span>
          <img src="@/assets/wide/header2-sp.png" class="ml-2" alt="" />
        </div>
        <a class="flex items-center ml-auto cursor-pointer text-sm text-brand">
          <img
            class="mr-2 w-[15px] h-[16px]"
            src="@/assets/remove.png"
            alt=""
          />
          清空所选分组
        </a>
      </div>
      <div class="search border border-[#8A6E49]">
        <div class="bd bg-white/50">
          <dl class="group" v-for="i in 3" :key="i">
            <dt class="label">图书/古籍</dt>
            <div class="values">
              <dd class="value active"><a>全部</a></dd>
              <dd class="value"><a>全部</a></dd>
              <dd class="value"><a>全部</a></dd>
            </div>
          </dl>
        </div>
      </div>
    </section>

    <PaginationContainer
      content-class="grid grid-cols-2 gap-x-[90px] gap-y-[30px]"
    >
      <router-link
        :to="{ name: 'Detail', params: { id: 1 } }"
        class="item relative py-8 px-10 bg-white/80 flex cursor-pointer"
        v-for="i in 4"
        :key="i"
      >
        <div class="thumb w-[170px] mr-8">
          <div
            class="book-cover"
            style="background-image: url(https://placeimg.com/300/200/tech)"
          ></div>
        </div>
        <div class="content flex-auto">
          <div class="hd mb-4 -mt-1">
            <span class="tag mr-1 text-brand text-sm">[图书]</span>
            <span class="tit font-bold"
              >Lorem ipsum dolor sit amet, consectetur.</span
            >
          </div>
          <dl class="meta">
            <div>
              <dt>责任者：</dt>
              <dd>Lorem ipsum dolor sit amet.</dd>
            </div>
            <div>
              <dt>创作时间：</dt>
              <dd>Lorem ipsum dolor sit amet.</dd>
            </div>
            <div>
              <dt>创作地点：</dt>
              <dd>Lorem ipsum dolor sit amet.</dd>
            </div>
            <div>
              <dt>内容：</dt>
              <dd>Lorem ipsum dolor sit amet.</dd>
            </div>
          </dl>
        </div>
      </router-link>
    </PaginationContainer>
  </AppWrapper>
</template>

<style lang="less" scoped>
.card {
  @apply bg-white rounded overflow-hidden;
}
</style>
